<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo</title>
  <script type="text/javascript" src="../vue.js"></script>
</head>

<body>
  <div id="app">
    <button @click="count++">+</button>
    <p>{{count}}</p>
    <input type="text" v-model="first">
    <input type="text" v-model="last">
    <!-- 可以这样计算 会冗余  -->
    <!-- <p>{{first}}{{last}}</p> -->
    <p>{{ful}}</p>
    <button @click="update">点击</button>
  </div>
</body>
<script type="text/javascript">
  Vue.config.productionTip = false
  const vm = new Vue({
    el: "#app",
    data() {
      return {
        first: '',
        last: '',
        count: 0
      }
    },
    methods: {
      // 这种也可以 但是会收其他data里值变更的影响而调用函数
      // ful() {
      // console.log(111);
      //   return this.first + this.last
      // }
      update() {
        this.ful = {
          one: 'li',
          two: 'yuan'
        }
      }
    },
    // 最优解 当模板中需要一个数据，是由其他的数据计算得来的，那么我们可以书写一个计算属性来得到这个数据（如果逻辑简单，则可以直接把逻辑写在插值中）
    computed: {
      // 如果只需要获取 可以简写 
      // ful() {
      //   // 只有在受监听的属性发生变化的时候 计算属性才会重新计算 否则每次使用这个属性的时候 读取的是上次计算的缓存结果  ful是作为属性放在vm身上的
      //   console.log(222);
      //   return this.first + this.last
      // }
      // 计算属性的可读可写
      ful: {
        // 当计算属性被读取的时候 就会调用get方法
        get() {
          return this.first + this.last
        },
        // 当计算属性被设置的时候,就会调用set方法 并且set方法接受一个参数
        set(value) {
          this.first = value.one;
          this.last = value.two
        }
      }
    }
  })
</script>

</html>